<template>
  <div>
      <h1 class="h1">我是状态的HelloWorld页面</h1>
      <p>状态中的name值：{{$store.state.name}}</p>
      <p>状态中的name值（使用computed）：{{getStoreName}}</p>
      <p>状态中的mobile值：{{$store.state.mobile}}</p>
      <p>状态中的mobile值（使用mapState）：{{getStoreMobile}}</p>
      <p>状态中的name值：{{nameAlias}}</p>
      <storesub></storesub>
  </div>
</template>

<script>

// 辅助函数，便于获取state中的值
import { mapState } from 'vuex';
import storesub from "./HelloStoreSub";

export default {
    name: "HelloStore",
    computed: {
        getStoreName() {
            return this.$store.state.name
        },
        ...mapState({
            getStoreMobile: function(state) {
                return state.mobile 
            },
            // 相当于state.name
            nameAlias: "name"
        }),
    },
    components: {
        storesub
    }
}
</script>

<style scoped>
    .h1 {
        color: #374757;
    }

</style>
